<template>
	<view class="release-box">
		<view class="release-type">
			<uni-list>
				<uni-list-item title="需求类型" link @click="getPrppu(1)" :rightText="content.requestType"></uni-list-item>
				<uni-list-item title="发布类型" link @click="getPrppu(2)" :rightText="content.publishType"></uni-list-item>

				<uni-list-item title="标题" direction="column">
					<template v-slot:footer>
						<input type="text" placeholder="为需求拟一个标题" style="font-size: 31rpx;height: 100rpx;"
							v-model="content.title" />
					</template>
				</uni-list-item>
				<uni-list-item title="上传图片 ">
				</uni-list-item>
				<uni-file-picker style="margin-left: 30rpx;margin-bottom: 30rpx;width: 96vw;" file-mediatype="image"
					limit="9" title="" @select="uploadFile"></uni-file-picker>
			</uni-list>

		</view>
		<view class="release-ark">条件与要求</view>
		<view class="release-type">
			<uni-list>
				<uni-list-item title="揭榜人数限制" link @click="getPrppu(3)" :rightText="content.numberLimit"></uni-list-item>
				<uni-list-item title="设置硬性条件" rightText="请选择">
					<template v-slot:footer>
						<switch color="#26C080" style="transform:scale(0.7)" @change="onChange" />
					</template>
				</uni-list-item>
				<uni-list-item title="要求揭榜人企业徽章" link @click="getPrppu(4)" :rightText="enterpriceHonor"
					v-if="checked"></uni-list-item>
				<uni-list-item title="要求揭榜人个人徽章" link @click="getPrppu(5)" :rightText="personHonor"
					v-if="checked"></uni-list-item>
				<uni-list-item title="其他揭榜要求" direction="column">
					<template v-slot:footer>
						<input type="text" placeholder="其他揭榜要求" style="font-size: 31rpx;height: 100rpx;"
							v-model="content.description" />
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="release-ark">联系方式</view>

		<view class="release-type"> <uni-list>
				<uni-list-item title="需求地点">
					<template v-slot:footer>
						<view class="footer-box">
							<view>
								请选择<uni-icons type="right" size="18" color="#9B9B9B" @click="getMap"></uni-icons>
							</view>

							<view class="describe-release">
								使用我的企业注册地址
							</view>
						</view>

					</template>
				</uni-list-item>
				<uni-list-item title="联系电话">
					<template v-slot:footer>
						<view class="footer-box">
							<input type="number" placeholder="请输入联系人的电话" placeholder-class="is-display"
								v-model="content.phone" />

							<view class="describe-release">
								使用我的企业注册法人信息
							</view>
						</view>

					</template>
				</uni-list-item>
				<uni-list-item title="联系人">
					<template v-slot:footer>
						<view class="footer-box">
							<input type="text" placeholder="请输入联系人的称呼" placeholder-class="is-display"
								v-model="content.personBadge" />
							<view class="describe-release">
								使用我的企业注册法人信息
							</view>
						</view>

					</template>
				</uni-list-item>

			</uni-list></view>

		<goComment title="去发布" @goPage="goPublish" className="nomarl"></goComment>
		<uni-popup ref="popup" type="bottom" round background-color="#ffffff" @close="onClose">
			<view class="title-radao">{{radioTitle}}</view>
			<checkRadio :list="radioList" @getCheckData="getCheckDataa" :checkedName="checkValue"></checkRadio>
		</uni-popup>
	</view>
</template>

<script setup>
	import goComment from "./componts/go-comment.vue"
	import checkRadio from "./componts/checkRadio.vue"
	import {
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import uniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue"
	import {
		publishNewRequest
	} from "@/api/mutual-assistance";
	import {
		reactive,
		ref,
		watch,
		getCurrentInstance
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	const fileList = ref([]);
	const checked = ref(false);

	const content = reactive({
		"requestType": "请选择",
		"description": "",
		"title": "",
		"phone": "",
		"resourceUrl": "",
		"enterpriseBadge": "",
		"numberLimit": 0,
		"personBadge": "",
		"setCriteria": "",
		"location": "",
		"contacts": "",
		"elseRequest": "",
		"publishType": "请选择"
	})
	const publishType = ref('请选择')
	const numberLimit = ref('请选择')
	const radioList = ref()
	const popup = ref()
	const radioTitle = ref("需求类型")
	const enterpriceHonor = ref('请选择')
	const personHonor = ref('请选择')
	const checkValue = ref(null)
	watch(
		() => radioTitle.value,
		(value) => {
			checkValue.value = null
		}, {
			immediate: true,
			deep: true
		}
	);

	function getMap() {
		console.log(1111)
		uni.navigateTo({
			url: "/package_mutual_assistance/pages/mutual-assistance/map"
		})
	}

	function onClose() {
		console.log(11111111)
	}

	function getPrppu(data) {
		popup.value.open()
		switch (data) {
			case 1:
				radioTitle.value = "需求类型"
				radioList.value = [{
					text: "设计类",
					value: 0
				}, {
					text: "开发类",
					value: 1
				}, {
					text: "营销类",
					value: 2
				}, {
					text: "咨询类",
					value: 3
				}, {
					text: "其他",
					value: 4
				}]
				break;
			case 2:
				radioTitle.value = "发布类型"
				radioList.value = [{
					text: "企业",
					value: 0
				}, {
					text: "个人",
					value: 3
				}, {
					text: "政府",
					value: 2
				}, {
					text: "其他",
					value: 1
				}]
				break;
			case 3:
				radioTitle.value = "揭榜人数限制"
				radioList.value = [{
					text: "2人",
					value: 2
				}, {
					text: "5人",
					value: 5
				}, {
					text: "10人",
					value: 10
				}, {
					text: "没有限制",
					value: -1
				}]
				break;
			case 4:
				radioTitle.value = "企业徽章"
				radioList.value = [{
					text: "暂无",
					value: -1
				}, {
					text: "暂无",
					value: 10
				}, {
					text: "暂无",
					value: 2
				}, {
					text: "5人",
					value: 5
				}]
				break;
			case 5:
				radioTitle.value = "个人徽章"
				radioList.value = [{
					text: "暂无",
					value: -1
				}, {
					text: "暂无",
					value: 2
				}, {
					text: "暂无",
					value: 5
				}, {
					text: "暂无",
					value: 10
				}]
				break;
			default:
				break;
		}
	}

	function getCheckDataa(data) {
		popup.value.close()
		console.log(data)
		switch (radioTitle.value) {
			case "需求类型":
				content.requestType = data
				radioList.value.forEach((item) => {
					if (item.text == data) {
						checkValue.value = item.value
					}
				})
				break;
			case "发布类型":
				console.log(data)
				let obj = {
					"企业": 0,
					"个人": 2,
					"政府": 1,
					"其他": 3
				}
				publishType.value = obj[data]
				content.publishType = data
				break;
			case "揭榜人数限制":
				content.numberLimit = data
				radioList.value.forEach((item) => {
					if (item.value == -1) {
						numberLimit.value = item.text
					} else if (item.value == data) {
						numberLimit.value = item.text
					}
				})
				break;
			case "企业徽章":
				enterpriceHonor.value = data
				break;
			case "个人徽章":
				personHonor.value = data
				break;
			case "需求地点":
				content.numberLimit = data
				break;
			default:
				break;
		}


	}

	function getRadioName(data) {
		console.log(data)
	}

	function onChange() {
		checked.value = !checked.value
		console.log(222)

	}
	const uploadFile = async res => {
		const {
			tempFilePaths
		} = res || {};
		const tempFile = tempFilePaths[0];
		uni.uploadFile({
			url: "/ht-user/user/upload",
			filePath: tempFile,
			name: "file",
			formData: {
				type: 2,
			},
			success: (res) => {
				const {
					statusCode,
					data
				} = res;
				if (statusCode === 200) {
					const parseData = JSON.parse(data);
					if (content.resourceUrl === '') {
						content.resourceUrl = parseData.data
					} else {
						content.resourceUrl += `ht:url${parseData.data}`
					}
				}
			},
		});
	}

	function goPublish() {
		publishNewRequest({
			"requestType": content.requestType,
			"description": content.description,
			"title": content.title,
			"phone": content.phone,
			"resourceUrl": content.resourceUrl,
			// "enterpriseBadge": content.enterpriseBadge,
			"numberLimit": 0,
			"personBadge": content.personBadge,
			// "setCriteria": content.setCriteria,
			// "location": content.location,
			// "contacts": content.contacts,
			// "elseRequest": content.elseRequest,
			"publishType": publishType.value
		}).then((res) => {
			console.log(res)
			proxy.modal.msgSuccess(res.msg);
		})

	}
	onNavigationBarButtonTap(() => {
		uni.showToast({
			title: "发布成功",

			duration: 2000
		})
	})
</script>

<style scoped lang="less">
	.release-box {
		.release-type {
			margin-top: 30rpx;

			position: relative;

			.is-display {
				text-align: right;
			}

			.up-load-box {
				height: 200rpx;
				width: 200rpx;
				background-color: #F7F8FD;
				text-align: center;
				line-height: 200rpx;
			}

			.describe-release {
				color: #5590F6;
				font-family: "ali";
				font-size: 24rpx;
			}

			.footer-box {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;

				input {
					text-align: right;
				}
			}

		}

		.release-ark {
			font-size: 31rpx;
			color: #272636;
			font-family: "ali-m";
			// padding: 10rpx;
			height: 60rpx;
			background-color: #F7F8FD;
			line-height: 80rpx;
			padding-left: 30rpx;
		}

		.go-comment {
			margin-top: 20rpx;
			background-image: linear-gradient(to right, #FF934C, #FC686F);
			width: 90vw;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			color: #ffffff;
			font-size: "ali-m";
			font-size: 32rpx;
			transform: translateX(5%);

		}

		.ridao-box {
			width: 100vw;
			height: 200rpx;
			padding-left: 30rpx;

		}

		.title-radao {
			width: 100vw;
			text-align: center;
			margin: 30rpx 0;
			font-family: "ali-m";
		}
	}
</style>